<template>
  <ul class="list">
    <li class="list-item" v-for="(item, index) in upList" :key="index">
      {{ item }}</li>
  </ul>
</template>

<script>
import { computed } from 'vue';

export default {
  props: {  //porps官方提供的
    list: {
      type: Array,
      default: () => []
    }
  },
  setup(props) {   //setup第一个参数就是props
    const upList = computed(() => {
      let res = []
      props.list.forEach((item, index) => {
        res.push(item.toUpperCase())
      })
      return res
    })
 
    return {upList}
  }
}

</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
  margin-top: 10px;
}

li {
  list-style: none;
  height: 30px;
  width: 204px;
  padding: 4px 10px;
  box-sizing: border-box;
  border: 1px solid #999;
  border-radius: 2px;
}
</style>